<template>
    <div class="app-container">
      <!--桌型页面-->
      <!--包含所有的子DIV-->
      <div class="flex">
        <!--用于弹性布局的div-->
        <div class="flex_chunk" v-for="data in time">
          <!--显示的一整块div-->
          <div class="chunk">
            <!--上半部分div 根据type判断何时显示-->
            <div v-show="data.type === 1" class="chunk_head_selected">
              {{data.name}}
            </div>
            <div v-show="data.type === 2" class="chunk_head_no_selected">
              {{data.name}}
            </div>
            <!--下半部分div-->
            <div class="chunk_tail">
              {{data.data}}
            </div>
          </div>
        </div>
      </div>

      <el-button type="primary" @click="multi_select(true)">开启多选</el-button>
      <el-button type="primary" @click="multi_select(false)">关闭多选</el-button>
      <el-button type="primary" @click="check_all">全选</el-button>
      <el-button type="primary" @click="no_check_all">取消全选</el-button>
      <!--菜品-->
      <!--包含所有的子DIV-->
      <div class="flex">
        <!--用于弹性布局的div-->
        <div class="flex_chunk" v-for="data in time">
          <!--显示的一整块div-->
          <div class="chunk2 click_frame"  @click="click_div(data)">
            <!--右上角选择标签 用类似图片的方法显示-->
            <b v-show="batch_operation === true" v-bind:class="{chunk2_b_selected:data.click}"></b>
            <span>{{data.name}}</span>
            <span>{{data.type}}</span>
          </div>
        </div>
      </div>

      <el-button type="primary" @click="openDialog">弹框</el-button>
      <el-dialog
        title="弹框"
        :visible.sync="dialog"
        width="450px"
        :before-close="closeDialog">
        <div class="dialog" style="margin:0 auto;width: 400px">
          <el-tabs style="color: orange" :stretch=true v-model="activeName2"  @tab-click="handleClick">
            <el-tab-pane label="做法" name="first"></el-tab-pane>
            <el-tab-pane label="口味" name="second"></el-tab-pane>
            <el-tab-pane label="规格" name="third"></el-tab-pane>
            <el-tab-pane label="沉重" name="fourth"></el-tab-pane>
          </el-tabs>
          <div class="dialog_body" >
            <div class="dialog_body_data" v-for="o in 10">
              <span class="font">加奶油</span>
              <span class="font">按钮</span>
              <i data-v-0af267bf class="icon el-icon-delete"></i>
              <i data-v-0af267bf class="icon el-icon-edit"></i>
            </div>
          </div>
          <div>
            <div v-show="show_dialog_handle">
              <el-input class="dialog_save_input" v-model="foodAttributeDetailName" placeholder="请输入内容"></el-input> <el-button class="dialog_save_button" @click="openDialog">保存</el-button>
            </div>
            <el-button class="open_show_dialog_handle_button"  @click="openShowDialogHandle">+添加做法</el-button>
          </div>
        </div>
      </el-dialog>

    </div>
</template>

<script>

export default {
  name: 'index',
  data () {
    return {
      activeName2: 'first',
      batch_operation: false,
      test: true,
      foodAttributeDialog:true,
      show_dialog_handle:false,
      time: [],
    }
  },
  created () {
    this.time_init();
  },
  mounted () {
    this.time_init();
  },
  methods: {
    openShowDialogHandle () {
      this.show_dialog_handle = true;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //打开弹框
    openDialog () {
      this.dialog = true
    },
    //关闭弹框
    closeFoodAttributeDialog () {
      this.dialog = false
    },
    time_init(){
      let data = [];
      for(let i = 0;i<3;i++){
        data[i]  = {
          name : i+1,
          data : "数据"+i,
          type : 1,
          click : false,
        }
      }
      for(let i = 3;i<6;i++){
        data[i]  = {
          name : i+1,
          data : "数据"+i,
          type : 2,
          click : false,
        }
      }
      console.log(data)
      this.time = data;
    },
    check_all(){
      for(let i = 0;i<this.time.length;i++){
        this.time[i].click = true;
      }
    },
    no_check_all(){
      for(let i = 0;i<this.time.length;i++){
        this.time[i].click = false;
      }
    },
    multi_select (type) {
      this.batch_operation = type
    },
    click_div(data){

      //如果在批量操作开启的情况下
      if(this.batch_operation){
        data.click = !data.click
      }
      //如果非批量操作则打开一个div 或者操作
      else{

      }

    }
  }
}
</script>

<style scoped>
  .flex_chunk{
    min-width: 16.66666666666666666666666%;
    float: left;
    flex-wrap: wrap;
    position: relative;
    padding: 10px;
    /*margin-right: 17px;*/

  }
  .flex{
    width: 100%;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    flex-wrap: wrap;
     -ms-flex-wrap: wrap;
  }

  .chunk {
    box-sizing: border-box;
    height: 108px;
    position: relative;
    cursor: pointer;
    background-color: #fafafa;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #d0d0d0;
     -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
  }
  .chunk2 {
    height: 108px;
    /*position: relative;*/
    cursor: pointer;
    background-color: #fafafa;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #d0d0d0;
     -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
  }
  .chunk_head_selected {
    background-color: rgb(239,133,91);
    padding: 22px;
  }
  .chunk_head_no_selected {
    background-color: rgb(98,98,98);
    padding: 22px;
  }
  .chunk_tail {
    /*background-color: rgb(98,98,98);*/
  }
  .chunk2 b {
    background: url(https://test.diet.lingyundata.com/order/resource/images/coupon/201903/3485135F355E479A8FDD1566C83DAAEB.png) no-repeat;
    width: 26px;
    height: 26px;
    position: absolute;
    right: -0px;
    top: -0px;
    z-index: 999;
  }

  .chunk2 b.chunk2_b_selected {
    background: url(https://test.diet.lingyundata.com/order/resource/images/coupon/201903/48F0B2E0B6E145EC9BBCFCC3A234E932.png) no-repeat;

  }

  @media screen and (max-width:1600px){
    .flex_chunk{
      min-width: 20%;
    }
  }
  @media screen and (max-width:1400px){
    .flex_chunk{
      min-width: 25%;
    }
  }
  @media screen and (max-width:1200px){
    .flex_chunk{
      min-width: 25%;
    }
  }
  @media screen and (max-width:980px){
    .flex_chunk{
      min-width: 33.33333333%;
    }
  }
  @media screen and (max-width:800px){
    .flex_chunk{
      min-width: 50%;
    }
  }
  @media screen and (max-width:580px){
    .flex_chunk{
      min-width: 100%;
    }
  }
  .el-tabs>>>.el-tabs__active-bar {
    background-color: rgb(239,133,91);
  }
  .el-tabs>>>.el-tabs__item.is-active {
    font-size: 18px;
    color: rgb(239,133,91);
  }

  .el-tabs>>>.el-tabs__item:hover {
    color: rgb(239,133,91);
  }
  .icon {
    cursor: pointer;
    font-size: 20px;
    padding-left: 5px;
    float: right;

  }
  .icon:hover {
    color: rgb(239,133,91);
  }
  .font {
    font-size: 18px;
  }
  .dialog_body {
    width: 100%;
    height: 300px;
    overflow: auto
  }
  .dialog_body_data {
    padding: 10px;
  }
  .dialog_save_input {
    width: 50%
  }
  .dialog_save_button {
    float: right;
    background-color: rgb(239,133,91);
    border: 1px solid rgb(239,133,91);
    color: white;
  }
  .open_show_dialog_handle_button {
    width: 100%;
    margin-top: 10px;
    margin-left: 0px;
    background-color: rgb(255,255,255);
    border: 1px solid #99a9bf;
    color: #1f2d3d
  }





</style>
